<!DOCTYPE HTML>
<html lang="zh-CN"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>正则表达式之入门</title>
	<link href="./style.css" rel="stylesheet">
</head><body>
	<h1>正则表达式之入门</h1>
	<div class="content">
		<div class="info">
			<h2>说明：</h2>
			<p>可以匹配手机号码和重复单词，也可以输入其他文本和正则表达式随意进行尝试<p>
			<p>手机号码可以填写多个，例如：12345678901 18812345678 18012345678<p>
			<p>单词可以使用font-size等合成词，同样可以输入多个单词例如:aa aa bb-bb bb-bb<p>
		</div>	
		<form>
			<fieldset>
				<legend>匹配测试</legend>
				<div class="fieldset-item">
					<span class="input-title">请输入文本：</span
					><input type="text" id="js_str" class="input-box"/>
				</div>
				<div class="fieldset-item">
					<span class="input-title">请输入正则表达式：</span
					><div class="input-box">
						<input type="text" id="js_reg" class="w-1of1"/>
						<a id="js_arrow_down" class="arrow-down"></a>
						<ul id="js_select" class="select">
							<li id="js_reg_mobile" class="option">匹配手机号码</li>
							<li id="js_reg_words" class="option">判断是否有相邻重复单词</li>
						</ul>
					</div>
				</div>
				<input class="btn-check" type="button" id="js_check" value="开始测试"/>
			</fieldset>
		</form>
		<div>
			<h2>测试结果：</h2>
			<p id="js_result" class="result"></p>
		</div>
	</div>
	<script src="./scripts.js"></script>
</body></html>